<template>
  <div>
    <div class="header" @click="handhide">
      <img :src="listbanner" >
      <div class="spotname">
        {{listname}}
      </div>
      <div class="page">
        <span class="iconfont">&#xe648;{{listgallery.length}}</span>
      </div>
    </div>
    <detail-common v-if="showhide" @handhides="handhides" :listgallery="listgallery"></detail-common>
  </div>
</template>

<script>
import DetailCommon from '@/components/Common/Common.vue'
export default { //  组件配置项
  name: 'DettailBanner',
  props: {
    listname: String,
    listbanner: String,
    listgallery: Array
  },
  components: {
    DetailCommon
  },
  data () {
    return {
      showhide: false
    }
  },
  methods: {
    handhide () {
      this.showhide = true
    },
    handhides () {
      this.showhide = false
      console.log(this.showhide)
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .header
    position relative
    img
      width 100%
    .spotname
      position absolute
      padding 0.4rem 0.4rem
      bottom 0
      left 0
      color white
    .page
      position absolute
      padding 0.4rem 0.4rem
      bottom 0
      right 0
      color white
</style>
